<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error {
            color: #f00;
        }
    </style>
</head>
<body>
<p>vuejs 另外一种数据处理的方案，叫做 watch ，单词本身就有查看监视的含义。在vuejs里面我们称之为对数据的监视。</p>
<p>需求：有一个用户注册的表单，我们前端需要去验证用户输入的信息是否满足如下的要求：</p>
<p>
    1. 用户名不能为空
</p>
<p>
    2. 用户名的长度不能少于3位（包含3位）
</p>
<p>
    3. 用户名的长度不能超过10位（包含10位）
</p>
<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <form action="">
        <div>
            用户名：<input type="text" v-model="username"> <span class="error">{{ message }}</span>
            <p>实现分析：我们后面显示的验证信息取决于用户输入的用户名的行为，那么我们可以在代码层面去监视用户的输入行为，当用户输入的信息不满足条件的时候，则显示与之对应的提示信息即可。</p>
        </div>
    </form>
</div>
</body>
<script src="./lib/vue.js"></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
            username: '',
            message: '',
        },
        watch: {
            /*watch是一个对象，该对象的属性就是data里面需要监视的数据，一旦该数据发生变化，对应的函数执行，该函数存在两个参数：参数1是改变后的值，参数2:是改变前的值*/
            username: function (newVal, oldVal) {
                console.log(newVal, oldVal);
                if (newVal == '') {
                    // 代表用户没有输入信息
                    this.message = '* 用户名不能为空';
                    return;
                }
                if (newVal.length <= 3) {
                    this.message = '* 用户名的长度不能少于3位';
                    return;
                }

                if (newVal.length >= 10) {
                    this.message = '* 用户名的长度不能超过10位';
                    return;
                }

                this.message = '';
                console.log('信息合法', newVal, newVal.length);

            }
        }
    });
</script>

</html>
